<template>
  <div>

    <Row type="flex" :gutter="20" justify="space-between">
      <Col span="8">
        <Card>
          <Tree :data="data6" :render="renderContent" :load-data="loadData" @on-select-change="getAreaInfo" class="demo-tree-render"></Tree>
        </Card>
      </Col>
      <Col span="16">
        <Card>
          <Tabs type="card" :animated="false" @on-click="tabChange" v-model="tabIndex">
            <TabPane label="用户列表" name="list">
              <Table border :columns="columns12" :data="codeData">
                <!--                  <template slot-scope="{ row }" slot="name">-->
                <!--                    <strong>{{ row.name }}</strong>-->
                <!--                  </template>-->
                <template slot-scope="{ row, index }" slot="action">
                  <Button type="primary" size="small" style="margin-right: 5px" @click="updateCode(row)">修改</Button>
                  <!--                    <Button type="error" size="small" @click="removeCode(row)">删除</Button>-->
                </template>
              </Table>
            </TabPane>
            <TabPane label="用户列表" name="list1">
              55555
            </TabPane>
            <TabPane label="用户列表" name="list2">
              ++++
            </TabPane>
          </Tabs>
        </Card>
      </Col>
    </Row>
    <div>
      <Modal :modalShow="modalShow">
      </Modal>
    </div>
  </div>
</template>

<script>
import { getAuditSysOfficeList, getAuditSysUserList, saveAuditSysUser } from '@/api/areaInfo'
export default {
  name: 'gpi',
  components: {
    Modal
  },
  data () {
    return {
      modalShow: false,
      data6: [],
      tabIndex: 0,
      columns12: [
        {
          title: '账号',
          key: 'login_name'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '手机号',
          key: 'mobile'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      codeData: [
      ]
    }
  },
  methods: {
    renderContent (h, { root, node, data }) {
      return h('span', {
        style: {
          display: 'inline-block',
          width: '100%'
        }
      }, [
        h('span', [
          h('span', '街道'),
          h('Icon', {
            props: {
              type: 'ios-paper-outline'
            },
            style: {
              marginRight: '8px'
            }
          }),
          h('span', data.title)
        ])/*,
        h('span', {
          style: {
            display: 'inline-block',
            float: 'right',
            marginRight: '32px'
          }
        }, [
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-add'
            }),
            style: {
              marginRight: '8px'
            },
            on: {
              click: () => { this.append(data) }
            }
          }),
          h('Button', {
            props: Object.assign({}, this.buttonProps, {
              icon: 'ios-remove'
            }),
            on: {
              click: () => { this.remove(root, node, data) }
            }
          })
        ]) */
      ])
    },
    append (data) {
      const children = data.children || []
      children.push({
        title: 'appended node',
        expand: true
      })
      this.$set(data, 'children', children)
    },
    remove (root, node, data) {
      const parentKey = root.find(el => el === node).parent
      const parent = root.find(el => el.nodeKey === parentKey).node
      const index = parent.children.indexOf(data)
      parent.children.splice(index, 1)
    },
    init (param) {
      getAuditSysOfficeList(param).then(ret => {
        // console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          this.data6 = this.getTree(ret.data.data.result)
        }
      })
    },
    codeInit (param) {
      getAuditSysUserList(param).then(ret => {
        // console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          this.codeData = ret.data.data.result
        }
      })
    },
    getTree (tree) {
      //  console.log(tree)
      let arr = []
      tree.forEach(item => {
        let obj = {
          title: item.name,
          id: item.id,
          parent_ids: item.parent_ids,
          grade: item.grade,
          children: [],
          loading: false
        }
        arr.push(obj)
      })
      //  console.log(arr)
      return arr
    },
    loadData (item, callback) {
      // console.log(item, callback, 'sss')
      let param = {
        grade: parseInt(item.grade) + 1,
        parent_ids: item.parent_ids + item.id + ','
      }
      let data = []
      getAuditSysOfficeList(param).then(ret => {
        // console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          data = this.getTree(ret.data.data.result)
          callback(data)
        }
      })
    },
    tabChange () {

    },
    removeCode () {

    },
    updateCode (data) {
      alert(1)
      this.modalShow = true
      console.log(this.modalShow)
      // updateAuditSysUserInfo(param).then(ret => {
      //   console.log(ret.data.errcode)
      //   if (ret.data.errcode === 0) {
      //     this.data6 = this.getTree(ret.data.data.result)
      //   }
      // })
    },
    getAreaInfo (val) {
      // console.log(val)
      let param = {
        company_id: val[0].id
      }
      // console.log(param)
      this.codeInit(param)
    },
    addCode () {
      saveAuditSysUser(param).then(ret => {
        console.log(ret.data.errcode)
        if (ret.data.errcode === 0) {
          this.data6 = this.getTree(ret.data.data.result)
        }
      })
    }
  },
  mounted () {
    let param = {
      grade: '3'
    }
    this.init(param)
  }

}
</script>

<style scoped>
  .demo-tree-render .ivu-tree-title{
    width: 100%;
  }
  .flx{
    display: flex;
    align-content: space-between;
  }
</style>
